<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::content})}">
<head>
    <title>区域详情 - 废物回收管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 返回按钮和标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center">
                <a href="/statistics/region" class="btn btn-outline-secondary me-3">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h2 class="mb-0">
                    <span th:text="${stats.region}">区域名称</span>
                    <small class="text-muted">统计详情</small>
                </h2>
            </div>
            <div class="d-flex gap-2">
                <select class="form-select" id="timeRange" onchange="changeTimeRange()">
                    <option value="today">今日</option>
                    <option value="week">本周</option>
                    <option value="month" selected>本月</option>
                    <option value="year">本年</option>
                </select>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">回收站数量</h6>
                                <h3 class="mb-0" th:text="${stats.stationCount}">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-store fa-2x opacity-50"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">订单数量</h6>
                                <h3 class="mb-0" th:text="${stats.orderCount}">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-shopping-cart fa-2x opacity-50"></i>
                            </div>
                        </div>
                        <div class="mt-3 small">
                            <span th:class="${stats.orderGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                <i th:class="${stats.orderGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                [[${#numbers.formatDecimal(Math.abs(stats.orderGrowth), 1, 1)}]]%
                            </span>
                            较上期
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">回收重量</h6>
                                <h3 class="mb-0">
                                    <span th:text="${stats.totalWeight}">0</span>
                                    <small>kg</small>
                                </h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-weight fa-2x opacity-50"></i>
                            </div>
                        </div>
                        <div class="mt-3 small">
                            <span th:class="${stats.weightGrowth >= 0 ? 'text-success' : 'text-danger'}">
                                <i th:class="${stats.weightGrowth >= 0 ? 'fas fa-arrow-up' : 'fas fa-arrow-down'}"></i>
                                [[${#numbers.formatDecimal(Math.abs(stats.weightGrowth), 1, 1)}]]%
                            </span>
                            较上期
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h6 class="card-title mb-1">用户数量</h6>
                                <h3 class="mb-0" th:text="${stats.userCount}">0</h3>
                            </div>
                            <div class="align-self-center">
                                <i class="fas fa-users fa-2x opacity-50"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <div class="rating">
                                <span>平均评分：</span>
                                <span th:text="${#numbers.formatDecimal(stats.avgRating, 1, 1)}">0</span>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 趋势图 -->
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">回收趋势</h5>
                <canvas id="trendChart" height="300"></canvas>
            </div>
        </div>
    </div>

    <th:block th:fragment="extraStyles">
        <style>
            .rating {
                display: flex;
                align-items: center;
                gap: 0.25rem;
            }
        </style>
    </th:block>

    <th:block th:fragment="extraScripts">
        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script th:inline="javascript">
            // 回收趋势图
            const trendData = /*[[${trendData}]]*/ {};
            new Chart(document.getElementById('trendChart'), {
                type: 'line',
                data: {
                    labels: trendData.labels,
                    datasets: [{
                        label: '回收量(kg)',
                        data: trendData.weights,
                        borderColor: 'rgb(75, 192, 192)',
                        tension: 0.1
                    }, {
                        label: '订单数',
                        data: trendData.orders,
                        borderColor: 'rgb(255, 99, 132)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 切换时间范围
            function changeTimeRange() {
                const range = document.getElementById('timeRange').value;
                const region = /*[[${stats.region}]]*/ '';
                window.location.href = `/statistics/region/${region}?range=${range}`;
            }
        </script>
    </th:block>
</body>
</html> 